<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./adaptive.js"></script> -->
    <style>
        * {
            width: 100%;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .lb {
            width: 100%;
            height: 500px;
            position: relative;
            overflow: hidden;
        }

        .lb ol {
            width: 500%;
            position: absolute;
            left: -100%;
            transition: all .5s;
        }

        .lb ol li {
            float: left;
        }

        .lb ol li {
            width: 20%;
        }
    </style>
</head>

<body>
    <div class="lb">
        <ol>
            <li>
                <img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t3.png" alt="">
            </li>
            <li>
                <img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t1.png" alt="">
            </li>
            <li>
                <img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t2.png" alt="">
            </li>
            <li>
                <img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t3.png" alt="">
            </li>
            <li>
                <img src="https://www.jq22.com/demo/jquerylbt202112220954/images/t1.png" alt="">
            </li>
        </ol>
        <ul></ul>
    </div>
    <script>
        var ol = document.querySelector('ol');
        var startX = 0;
        var moveX = 0;
        var index = 0;6
        var w = window.innerWidth;
        var time = setInterval(timer, 2000);
        function timer() {
            index++;
            var translatex = -index * w;
            ol.style.transition = 'all .5s';
            ol.style.transform = `translateX(${translatex}px)`
            console.log(index);
        }
        ol.addEventListener("transitionend", function () {
            if (index == 3) {
                index = 0;
                ol.style.transition = 'none';
                var translatex = -index * w;
                ol.style.transform = `translateX(${translatex}px)`
            }
        })
        ol.addEventListener("touchstart", function (e) {
            startX = e.targetTouches[0].pageX;
            clearTimeout(time);
        })
        ol.addEventListener("touchend", function (e) {
            time = setInterval(timer, 2000);
        })
        ol.addEventListener("touchmove", function (e) {
            moveX = e.targetTouches[0].pageX - startX;
            // time = setInterval(timer, 2000);
            ol.style.transform = `translateX(${-index * w + moveX}px)`
        })
        ol.addEventListener("touchend", function (e) {
            if (Math.abs(moveX) > 100) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                var translatex = -index * w;
                ol.style.transition = 'all .5s';
                ol.style.transform = `translateX(${translatex}px)`
            } else {
                translatex = -index * w
                ol.style.transition = 'all .5s';
                ol.style.transform = `translateX(${translatex}px)`
            }
            if (index > 2) {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                index = 0;
                translatex = -index * w;
                ol.style.transition = 'none';
                ol.style.transform = `translateX(${translatex}px)`
            }
            // ol.style.transition = 'all .5s';
            if (index < 0) {
                index = 2;
                translatex = -index * w;
                ol.style.transition = 'none';
                ol.style.transform = `translateX(${translatex}px)`
            }
        })

    </script>
</body>

</html>